<template>
	<scroll-view scroll-x class="MTabs-out">
		<view class="MTabs">
			<view class="MTabs-item" v-for="(item,index) in tabs" :key="index" :class="item.Id==state.curTabId&&'active'" @click="changeTab(item)">
				{{item.ClassName}}
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
	import { reactive, onMounted, computed, ref, toRaw } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	const state = reactive({
		curTabId: 0
	})

	const emit = defineEmits(['change', 'changeT'])

	const props = defineProps({
		tabs: {
			type: Array,
			default: []
		}
	})

	onLoad((query) => {

	})

	const init = (tabId) => {
		changeTab(props.tabs.filter(it => it.Id == tabId)[0])
	}

	const changeTab = (item) => {
		if (!item) item = props.tabs[0]
		state.curTabId = item.Id
		emit('change', state.curTabId)
		emit('changeT', item)
	}

	defineExpose({
		init
	})
</script>

<style lang="scss" scoped>
	.MTabs-out {
		height: 80rpx;
		width: 100%;
		border-bottom: 1rpx solid #eee;
		border-top: 1rpx solid #eee;

		.MTabs {
			display: flex;
			height: 80rpx;
			width: 100%;

			.MTabs-item {
				line-height: 80rpx;
				padding: 0 30rpx;
				border-right: 1rpx solid #eee;
				white-space: nowrap;

				&.active {
					background: #409eff;
					color: #fff;
				}
			}
			.MTabs-item::-webkit-scrollbar{
				width: 0;
				color:transparent;
			}
		}
	}
</style>
